<script>
import SCascader from "@/components/cascader";

export default {
  name: "formItemComp",
  props: {
    formItem: {
      type: Object,
      default: () => ({}),
    },
    modelValue: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      disabled: false,
    };
  },
  watch: {
    formItem: {
      deep: true,
      handler(val) {
        this.disabled = val.formItemProps.disabled;
      },
    },
  },
  render() {
    const { formItem } = this;
    const formItemProps = formItem?.formItemProps || {};
    const compWidth = formItemProps?.compWidth || "100%";
    const compProps = formItemProps?.compProps || {};
    const compEvents = formItemProps?.compEvents || {};
    const multiple = formItemProps?.multiple || false;
    const clearable = formItemProps?.clearable ?? true;
    let compType = `el-${formItemProps?.component || "input"}`;
    this.disabled = formItemProps.disabled;
    if (compType.indexOf("s-destination") > -1) compType = "s-destination";
    return {
      "el-input": (
        <el-input
          {...{ props: compProps, on: compEvents }}
          clearable={clearable}
          disabled={this.disabled}
          style={{ width: compWidth }}
          v-model={this.modelValue[formItem.prop]}
          placeholder={compProps.placeholder || `请输入${formItem.label}`}
        ></el-input>
      ),
      "el-cascader": (
        <el-cascader
          {...{ props: compProps, on: compEvents }}
          clearable={clearable}
          disabled={this.disabled}
          style={{ width: compWidth }}
          v-model={this.modelValue[formItem.prop]}
          options={compProps.options || formItemProps.dataSource}
          placeholder={compProps.placeholder || `请选择${formItem.label}`}
        ></el-cascader>
      ),
      "el-select": (
        <el-select
          {...{ props: compProps, on: compEvents }}
          clearable={clearable}
          filterable
          multiple={multiple}
          disabled={this.disabled}
          style={{ width: compWidth }}
          v-model={this.modelValue[formItem.prop]}
          placeholder={compProps.placeholder || `请选择${formItem.label}`}
        >
          {formItemProps?.dataSource?.map((n, index) => (
            <el-option
              label={compProps.selectLabel ? n[compProps.selectLabel] : n.label}
              value={compProps.selectValue ? n[compProps.selectValue] : n.value}
              key={index}
            ></el-option>
          ))}
        </el-select>
      ),
      "el-s-cascader": (
        <SCascader
          {...{ props: compProps, on: compEvents }}
          clearable={clearable}
          disabled={this.disabled}
          style={{ width: compWidth }}
          v-model={this.modelValue[formItem.prop]}
          placeholder={compProps.placeholder || `请选择${formItem.label}`}
        ></SCascader>
      ),
      "el-date-picker": (
        <el-date-picker
          {...{ props: compProps, on: compEvents }}
          clearable={clearable}
          disabled={this.disabled}
          style={{ width: compWidth }}
          v-model={this.modelValue[formItem.prop]}
          type={compProps.type || "date"}
          picker-options={compProps.pickerOptions || {}}
          placeholder={compProps.placeholder || `请选择${formItem.label}`}
        ></el-date-picker>
      ),
      "s-destination": (
        <s-destination
          {...{ props: compProps, on: compEvents }}
          disabled={this.disabled}
          style={{ width: compWidth }}
          v-model={this.modelValue[formItem.prop]}
          placeholder={compProps.placeholder || `请选择${formItem.label}`}
        ></s-destination>
      ),
    }[compType];
  },
};
</script>

<style scoped></style>
